<template>
  <div class="homeAside">
    <div class="asidebox safety-prevention">
      <a href="#" style="display:block;magin-top:5px">
        <img src="../assets/home/index-link.png" alt="安全提示" width="218" height="31" />
      </a>
    </div>
    <div class="asidebox box-traveller">
      <div class="asidebox-hd">
        <h2 class="hd-title">
          <a href="#">旅游家专栏</a>
        </h2>
        <a href="#" class="hd-right">专栏首页</a>
      </div>
      <div class="asidebox-bd">
        <ul class="slide-ul" style="left:0px">
          <li v-for="(item,index) in AsideList" v-show="currentIndex == index" :key="index">
            <div class="imgae">
              <a href="#">
                <img :src="item.img" alt height="140" width="260" />
              </a>
            </div>
            <h3>
              <a href="#">{{item.title}}</a>
              <p>{{item.content}}</p>
            </h3>
          </li>

        </ul>
        <div class="page" v-if="this.AsideList.length > 1">
          <ol class="slide-ol">
            <li
              v-for="(item,index) in AsideList"
              :key="index"
              @click="gotoPage(index)"
              :class="{'active':currentIndex == index}"
            ></li>
          </ol>
        </div>
      </div>
    </div>
    <div class="asidebox box-gonglve">
      <div class="asidebox-hd">
        <h2 class="hd-title">旅游攻略推荐</h2>
        <a href="#" class="hd-right">更多</a>
      </div>
      <div class="asidebox-bd" style="height:174px">
        <div class="gonglve-item">
          <div class="img">
            <a href="#">
              <img
                src="https://n1-q.mafengwo.net/s16/M00/E1/5F/CoUBUl7rJEeAN2uWAAGAj22UUto15.jpeg?imageMogr2%2Fthumbnail%2F%21260x139r%2Fgravity%2FCenter%2Fcrop%2F%21260x139%2Fquality%2F100"
                alt
              />
            </a>
            <span class="mark">自由行攻略</span>
          </div>
          <h3>
            <a href="#">呼伦贝尔大草原#呼伦贝尔大草原#呼伦贝尔大草原干货</a>
          </h3>
        </div>
      </div>
    </div>
    <div class="asidebox box-traveller box-activity">
      <div class="asidebox-hd">
        <h2 class="hd-title">最新活动</h2>
        <a href="#" class="hd-right">查看全部></a>
      </div>
      <div class="asidebox-bd">
        <div class="image">
          <a href="#">
            <img
              src="https://b1-q.mafengwo.net/s8/M00/91/94/wKgBpVWTULKAJN44AABd8Gtn0o437.jpeg?imageView2%2F2%2Fw%2F260%2Fh%2F178%2Fq%2F90"
              alt
              height="178"
              width="260"
            />
          </a>
        </div>
        <h3>
          <a href="#" style="color:#ff9d00">马蜂窝拍卖行</a>
          <p style="height:20px;margin-top:10px">每周二：精美实物奖品！</p>
        </h3>
      </div>
    </div>
    <div class="asidebox box-unknown">
      <div class="asidebox-hd">
        <h2 class="hd-title">未知旅行实验室</h2>
        <a href="#" class="hd-right">查看更多></a>
      </div>
      <div class="asidebox-bd" style="height:170px">
        <a href="#">
          <img
            src="http://images.mafengwo.net/images/new-index/unknownTravel181120.png"
            alt
            width="260"
            height="170"
          />
        </a>
      </div>
    </div>
    <div class="asidebox box-hr">
      <div class="asidebox-hd">
        <h2 class="hd-title">加入马蜂窝</h2>
        <a href="#" class="hd-right">了解详情></a>
      </div>
      <div class="asidebox-bd" style="height:146px">
        <a href="#">
          <img
            src="https://b1-q.mafengwo.net/s14/M00/01/D0/wKgE2l1t1WqAOUvnAACxwvHwMhM32.jpeg"
            alt
            width="260"
            height="146"
          />
        </a>
      </div>
    </div>
    <div class="asidebox box-news">
      <div class="asidebox-hd">
        <div class="hd-title">
          马蜂窝
          <h2>
            <a href="#">旅游网</a>
          </h2>最新资讯
        </div>
      </div>
      <ul class="asidebox-bd">
        <li>
          04月07日
          <a href="#">马蜂窝“云旅游”直播的攻与守</a>
        </li>
        <li>
          04月01日
          <a href="#">马蜂窝的“云上战疫”</a>
        </li>
        <li>
          02月19日
          <a href="#">科技“战疫” ：马蜂窝大数据赋能旅游业</a>
        </li>
        <li>
          02月13日
          <a href="#">陈罡：疫情下旅游业的“守恒与求变”</a>
        </li>
        <li>
          02月06日
          <a href="#">马蜂窝将退订完成率定为最高KPI</a>
        </li>
        <li>
          09月28日
          <a href="#">马蜂窝国庆白领出游偏好调查：超7成在旅途中工作</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeAside",
  data() {
    return {
      AsideList: [
    {
        "id":"1",
        "img":"https://b3-q.mafengwo.net/s13/M00/71/D6/wKgEaVyd7i6AFjCjAADni5x-vvY89.jpeg",
        "title":"夏木尼，小王子的玫瑰城市",
        "content":"夏木尼（Chamounix）是法国勃朗峰脚下最著名的小城，《小王子》里的玫瑰城市，世界登山运动的发源地。"
    },
    {
        "id":"2",
        "img":"https://n2-q.mafengwo.net/s13/M00/72/B9/wKgEaVyd7ryAdEkeAADZPC_YEuI86.jpeg",
        "title":"暹粒油淋鱼",
        "content":"默默等待，鱼上桌，迅速夹一口塞在嘴里——我就像个戒烟多日的老烟枪终于抽上了烟，心里的空洞瞬间被填满了。"
    },
    {
        "id":"3",
        "img":"https://n4-q.mafengwo.net/s13/M00/74/67/wKgEaVyd79SAD6lVAAC7rgrAj0E79.jpeg",
        "title":"西安：旧长安的画皮",
        "content":"西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。"
    },
    {
        "id":"4",
        "img":"https://n1-q.mafengwo.net/s13/M00/FB/B9/wKgEaVycpr6Ae-TXAAC_Ffkpk0s50.jpeg",
        "title":"漫山岛",
        "content":"漫山岛在第二条路上，满眼都是天赋，却偏爱挥霍青山绿水，用自己的方式过小日子，即便强行拖它起来，也得不到结果。"
    },
    {
        "id":"5",
        "img":"https://n3-q.mafengwo.net/s13/M00/FD/07/wKgEaVycp3-AVimPAADWiqvk6ek72.jpeg",
        "title":"胡日尔镇的美术馆",
        "content":"我最终从胡日尔的美术馆里带走了一幅画，画的是冬日的萨满岩，是日落时分。"
    }
],
      currentIndex: 0,
      timer: null
    };
  },
  mounted() {
    this.getData();
    this.timer = setInterval(() => {
    this.gotoPage(this.nextIndex);
    }, 3500)
  },

  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getData() {
      // this.$axios.get("../../static/Aside.json").then(
      //   response => {
      //     this.AsideList = response.data;
      //   },
      //   response => {
      //     console.log("get AsideList is error");
      //   }
      // );
    },
    gotoPage(index) {
      this.currentIndex = index;
    }
  },
  computed: {
    prevIndex() {
      if (this.currentIndex == 0) {
        return this.AsideList.length - 1;
      } else {
        return this.currentIndex - 1;
      }
    },
    nextIndex() {
      if (this.currentIndex == this.AsideList.length - 1) {
        return 0;
      } else {
        return this.currentIndex + 1;
      }
    }
  },
//   runInv() {
//     this.timer = setInterval(() => {
//       this.gotoPage(this.nextIndex);
//     }, 1000);
//   }
};
</script>
<style scoped>
@import url("../css/home.css");
@import url("../css/app.css");
</style>
